<% cache(ketcher_layout_cache_key) do %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Ketcher</title>
    <%= stylesheet_link_tag 'ketcherails/ketcher-with-sprites' %>
    <%= javascript_include_tag 'ketcherails/ketcher' %>
    <% if File.exists?(path = Rails.root + 'public/images/sprites/' + Ketcherails::SPRITES_CSS_FILENAME) %>
      <link rel="stylesheet" media="screen" href="/images/sprites/ketcherails-sprites.css" />
    <% end %>
    <script type="text/javascript">
      window.onload = function () {
        // Parse URL parameters
        var param_string = document.location.search;
        if (param_string.length > 0)
          param_string = param_string.substring(1);
        var param_list = param_string.split(/&/g);
        var param_hash = {};
        for (var i = 0; i < param_list.length; ++i) {
          var pair = param_list[i].split('=', 2);
          param_hash[pair[0]] = pair.length != 2 || unescape(pair[1]);
        }
        if (param_hash.ketcher_maximize) {
          $('ketcher_div').removeClassName('ketcherDivMaxSize');
        }
        // Initialize ketcher
        ketcher.init({ketcher_api_url: param_hash.ketcher_api_url});
      };
    </script>
  </head>

  <body>

    <div id="ketcher_div" class="ketcherDivMaxSize">
      <div id="ketcher_window">
        <main id="client_area"></main>
        <menu role="toolbar">
          <li id="main_menu">
            <div>
              <%= sprite_tag '', id: 'selector', class: 'sideButton modeButton stateButton selection_lasso-sidebar', title: 'Lasso Selection Tool (Esc)', alt: '', selid: 'selector_lasso' %>
              <%= sprite_tag '', id: 'selector_dropdown', class: 'dropdownButton main_dropdown', alt: '' %>
            </div>
            <div class="toolDelimiter"></div>
            <div class="toolButtonCell toolButton" id="new">
              <%= sprite_tag '', class: 'main_document-new', title: 'Clear Canvas (Ctrl+N)', alt: '' %>
            </div>
            <div class="toolButtonCell toolButton" id="open">
              <%= sprite_tag '', class: 'main_document-open', title: 'Open... (Ctrl+O)', alt: '' %>
            </div>
            <div class="toolButtonCell toolButton" id="save">
              <%= sprite_tag '', class: 'main_document-save-as', title: 'Save As... (Ctrl+S)', alt: '' %>
            </div>
            <div class="toolDelimiter"></div>
            <div class="toolButtonCell toolButton buttonDisabled" id="undo">
              <%= sprite_tag '', class: 'main_edit-undo', title: 'Undo (Ctrl+Z)', alt: '' %>
            </div>
            <div class="toolButtonCell toolButton buttonDisabled" id="redo">
              <%= sprite_tag '', class: 'main_edit-redo', title: 'Redo (Ctrl+Y)', alt: '' %>
            </div>
            <div class="toolButtonCell toolButton buttonDisabled" id="cut">
              <%= sprite_tag '', class: 'main_edit-cut', title: 'Cut (Ctrl+X)', alt: '' %>
            </div>
            <div class="toolButtonCell toolButton buttonDisabled" id="copy">
              <%= sprite_tag '', class: 'main_edit-copy', title: 'Copy (Ctrl+C)', alt: '' %>
            </div>
            <div class="toolButtonCell toolButton buttonDisabled" id="paste">
              <%= sprite_tag '', class: 'main_edit-paste', title: 'Paste (Ctrl+V)', alt: '' %>
            </div>
            <div class="toolDelimiter"></div>
            <div class="toolButtonCell toolButton" id="zoom_in">
              <%= sprite_tag '', class: 'main_view-zoom-in', title: 'Zoom In (+)', alt: '' %>
            </div>
            <div class="toolButtonCell toolButton" id="zoom_out">
              <%= sprite_tag '', class: 'main_view-zoom-out', title: 'Zoom Out (-)', alt: '' %>
            </div>
            <div class="toolDelimiter"></div>
            <div id="zoom_list_cell">
              <select id="zoom_list"></select>
            </div>
            <div class="toolDelimiter"></div>
            <div class="toolButtonCell toolButton serverRequired" id="clean_up">
              <%= sprite_tag '', class: 'main_layout', title: 'Clean Up (Ctrl+L)', alt: '' %>
            </div>
            <div id="toolText" style="width:32px"></div>
            <div class="toolButtonCell toolButton serverRequired" id="save_template">
              <%= sprite_tag '', class: 'main_star', title: 'Save Template', alt: '' %>
            </div>
            <div class="toolButtonCell toolButton serverRequired" id="show_mol_info">
              <%= sprite_tag 'main_info', title: 'Show Molecule Info', alt: '' %>
            </div>

            <div class="toolDelimiter"></div>

            <div class="toolButtonCell toolButton modeButton serverRequired" id="amino_acids">
              <%= sprite_tag 'main_amino_acids', title: 'Build chains', alt: '' %>
            </div>
          </li>
          <li id="toolbox">
            <div class="menuButtonCell">
              <%= sprite_tag '', id: 'select_erase', class: 'sideButton modeButton main_edit-clear', title: 'Erase', alt: '' %>
            </div>
            <div class="menuButtonCell">
              <%= sprite_tag '', id: 'bond', class: 'sideButton modeButton stateButton bond_bond_single-sidebar', title: 'Single Bond (1)', alt: '', selid: 'bond_single' %>
              <%= sprite_tag '', id: 'bond_dropdown', class: 'dropdownButton main_dropdown', alt: '' %>
            </div>
            <div class="menuButtonCell">
              <%= sprite_tag '', id: 'chain', class: 'sideButton modeButton main_chain', title: 'Chain Tool', alt: '' %>
            </div>
            <div class="menuButtonCell">
              <%= sprite_tag '', id: 'template', class: 'sideButton modeButton stateButton template_template0-sidebar', title: 'Benzene (T)', selid: 'template_0', alt: '' %>
              <%= sprite_tag '', id: 'template_dropdown', class: 'dropdownButton main_dropdown', alt: '' %>
            </div>
            <div class="menuButtonCell">
              <%= sprite_tag '', id: 'charge_plus', class: 'sideButton modeButton main_charge_plus', title: 'Charge Plus (5)', alt: '' %>
            </div>
            <div class="menuButtonCell">
              <%= sprite_tag '', id: 'charge_minus', class: 'sideButton modeButton main_charge_minus', title: 'Charge Minus (5)', alt: '' %>
            </div>
            <div class="menuButtonCell">
              <%= sprite_tag '', id: 'reaction', class: 'sideButton modeButton stateButton reaction_reaction-arrow-sidebar', selid: 'reaction_arrow', title: 'Reaction Arrow Tool', alt: '' %>
              <%= sprite_tag '', id: 'reaction_dropdown', class: 'dropdownButton main_dropdown', alt: '' %>
            </div>
            <div class="menuButtonCell">
              <%= sprite_tag '', id: 'sgroup', class: 'sideButton modeButton main_sgroup', title: 'S-Group (Ctrl+G)', alt: '' %>
            </div>
            <div class="menuButtonCell">
              <%= sprite_tag '', id: 'rgroup', class: 'sideButton modeButton stateButton rgroup_rgroup-label-sidebar', selid: 'rgroup_label', title: 'R-Group Tool (Shift+R)', alt: '' %>
              <%= sprite_tag '', id: 'rgroup_dropdown', class: 'dropdownButton main_dropdown', alt: '' %>
            </div>
            <div class="menuButtonCell">
              <%= sprite_tag '', id: 'transform', class: 'sideButton modeButton stateButton transform_transform-rotate-sidebar', selid: 'transform_rotate', title: 'Rotate Tool', alt: '' %>
              <%= sprite_tag '', id: 'transform_dropdown', class: 'dropdownButton main_dropdown', alt: '' %>
            </div>
            <div class="menuButtonCell">
              <%= sprite_tag '', id: 'usertemplate', class: 'sideButton modeButton stateButton main_4stars', title: '', selid: 'usertemplate_0', alt: '' %>
              <%= sprite_tag '', id: 'usertemplate_dropdown', class: 'dropdownButton main_dropdown', alt: '' %>
            </div>
            <div class="menuButtonCell serverRequired">
              <%= sprite_tag '', id: 'polymer', class: 'sideButton modeButton stateButton main_polymer', title: 'Polymer', selid: 'polymer_bead', alt: '' %>
              <%= sprite_tag '', id: 'polymer_dropdown', class: 'dropdownButton main_dropdown', alt: '' %>
            </div>
          </li>
          <li id="templates">
            <div class="toolButtonCell cellFlex">
              <% @template_categories.each do |cat| %>
                <div class="toolButtonCell toolButton templateCategory templateCategoryDropdownButton" id="<%= 'commontemplate' + cat.id.to_s + '_dropdown' %>" data-id="<%= cat.id %>" span="1">
                  <%= template_category_icon_tag cat %>
                </div>
                <div style="display: none;" id="<%= 'commontemplate' + cat.id.to_s + '_dropdown_default' %>">
                  <%= template_category_icon_tag cat %>
                </div>
              <% end %>
            </div>
          </li>
          <li id="elements">
            <div class="sideButton modeButton" id="atom_h" title="H Atom (H)"></div>
            <div class="sideButton modeButton" id="atom_c" title="C Atom (C)"></div>
            <div class="sideButton modeButton" id="atom_n" title="N Atom (N)"></div>
            <div class="sideButton modeButton" id="atom_o" title="O Atom (O)"></div>
            <div class="sideButton modeButton" id="atom_s" title="S Atom (S)"></div>
            <div class="sideButton modeButton" id="atom_p" title="P Atom (P)"></div>
            <div class="sideButton modeButton" id="atom_f" title="F Atom (F)"></div>
            <div class="sideButton modeButton" id="atom_cl" title="Cl Atom (Shift+C)"></div>
            <div class="sideButton modeButton" id="atom_br" title="Br Atom (Shift+B)"></div>
            <div class="sideButton modeButton" id="atom_i" title="I Atom (I)"></div>
            <div class="sideButton modeButton" id="atom_table" title="Periodic table"></div>
            <div class="sideButton modeButton" id="atom_reagenerics" title="Reaxys Generics"></div>
          </li>
        </menu>
      </div>

              <div class="dropdownList" id="selector_dropdown_list" style="display:none">
                <table>

                  <tr class="dropdownListItem" id="selector_lasso" title="Lasso Selection Tool (Esc)">
                    <td>
                      <div id="select_lasso_todo">
                        <%= sprite_tag '', class: 'dropdownIcon selection_lasso-dropdown', alt: '' %>
                      </div>
                      Lasso Selection Tool
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="selector_square" title="Rectangle Selection Tool (Esc)">
                    <td>
                      <div id="select_square_todo">
                        <%= sprite_tag '', class: 'dropdownIcon selection_rectangle-dropdown', alt: '' %>
                      </div>
                      Rectangle Selection Tool
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="selector_fragment" title="Fragment Selection Tool (Esc)">
                    <td>
                      <div id="select_fragment">
                        <%= sprite_tag '', class: 'dropdownIcon selection_structure-dropdown', alt: '' %>
                      </div>
                      Fragment Selection Tool
                    </td>
                  </tr>
                </table>
              </div>

              <div class="dropdownList renderFirst" id="bond_dropdown_list" style="display:none">
                <table>
                  <tr class="dropdownListItem" id="bond_single" title="Single Bond (1)">
                    <td>
                      <div id="bond_single_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_single-dropdown', alt: '' %>
                      </div>Single
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_double" title="Double Bond (2)">
                    <td>
                      <div id="bond_double_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_double-dropdown', alt: '' %>
                      </div>
                      Double
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_triple" title="Triple Bond (3)">
                    <td>
                      <div id="bond_triple_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_triple-dropdown', alt: '' %>
                      </div>
                      Triple
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_coordination" title="Coordination Bond (9)">
                    <td>
                      <div id="bond_coordination_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_any-dropdown', alt: '' %>
                      </div>
                      Coordination
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_coordinationarrow" title="Coordination Bond (9)">
                    <td>
                      <div id="bond_coordinationarrow_preview">
                        <%= sprite_tag '', class: 'dropdownIcon rgroup_rgroup-attpoints-dropdown', alt: '' %>
                      </div>
                      Coordination
                    </td>
                  </tr>
                  <tr>
                    <td class="dropdownListDelimiter"></td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_up" title="Single Up Bond (1)">
                    <td>
                      <div id="bond_up_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_up-dropdown', alt: '' %>
                      </div>
                      Single Up
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_bold" title="Bold bond">
                    <td>
                      <div id="bond_bold_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_bold-dropdown', alt: '' %>
                      </div>
                      Bold Up
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_down" title="Single Down Bond (1)">
                    <td>
                      <div id="bond_down_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_down-dropdown', alt: '' %>
                      </div>
                      Single Down
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_bold_down" title="Bold Down Bond (1)">
                    <td>
                      <div id="bond_bold_down_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_bold_down-dropdown', alt: '' %>
                      </div>
                      Bold Down
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_updown" title="Single Up/Down Bond (1)">
                    <td>
                      <div id="bond_updown_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_updown-dropdown', alt: '' %>
                      </div>
                      Single Up/Down
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_crossed" title="Double Cis/Trans Bond (2)">
                    <td>
                      <div id="bond_crossed_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_crossed-dropdown', alt: '' %>
                      </div>
                      Double Cis/Trans
                    </td>
                  </tr>
                  <tr>
                    <td class="dropdownListDelimiter"></td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_any" title="Any Bond (0)">
                    <td>
                      <div id="bond_any_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_any-dropdown', alt: '' %>
                      </div>
                      Any
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_aromatic" title="Aromatic Bond (4)">
                    <td>
                      <div id="bond_aromatic_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_aromatic-dropdown', alt: '' %>
                      </div>
                      Aromatic
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_singledouble" title="Single/Double Bond">
                    <td>
                      <div id="bond_singledouble_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_singledouble-dropdown', alt: '' %>
                      </div>
                      Single/Double
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_singlearomatic" title="Single/Aromatic Bond">
                    <td>
                      <div id="bond_singlearomatic_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_singlearomatic-dropdown', alt: '' %>
                      </div>
                      Single/Aromatic
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="bond_doublearomatic" title="Double/Aromatic Bond">
                    <td>
                      <div id="bond_doublearomatic_preview">
                        <%= sprite_tag '', class: 'dropdownIcon bond_bond_doublearomatic-dropdown', alt: '' %>
                      </div>
                      Double/Aromatic
                    </td>
                  </tr>
                </table>
              </div>

              <div class="dropdownList renderFirst" id="template_dropdown_list" style="display:none">
                <table>
                  <% %w(Benzene Cyclopentadiene Cyclohexane Cyclopentane Cyclopropane Cyclobutane Cycloheptane Cyclooctane).each_with_index do |tmpl, index| %>
                  <tr class="dropdownListItem" id="template_<%= index %>" title="<%= tmpl %> (T)">
                    <td>
                      <div id="template_<%= index %>_preview">
                        <%= sprite_tag '', class: 'dropdownIcon template_template' + index.to_s + '-dropdown', alt: '' %>
                      </div>
                      <%= tmpl %>
                    </td>
                  </tr>
                  <% end %>
                </table>
              </div>

              <% idx = 0 %>
              <% @template_categories.each do |cat|%>
              <div class="dropdownList renderFirst commonTemplateDropdownList" id="commontemplate<%= cat.id %>_dropdown_list" style="display:none">
                <table>
                  <thead>
                    <tr>
                      <th colspan="3">
                        <b><%= cat.name %></b>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
              </div>
              <% end %>

              <div class="dropdownList renderFirst" id="usertemplate_dropdown_list" style="display:none">
                <table>
                  <thead>
                    <tr class="dataUserTemplate">
                      <th>
                        <label>Search:</label>
                      </th>
                      <th>
                        <input id="usertemplate_search_name" type="string" maxlength="15" size="15"/>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
              </div>

              <div class="dropdownList renderFirst" id="polymer_dropdown_list" style="display:none">
                <table>
                  <tbody>
                    <% %W(Bead Surface).each_with_index do |tool, index| %>
                    <tr class="dropdownListItem" id="polymer_<%= tool.downcase %>" title="<%= tool %>">
                      <td>
                        <div id="polymer_<%= index %>_preview">
                          <%= sprite_tag '', class: 'dropdownIcon polymer_polymer_' + tool.downcase + '-dropdown', alt: '' %>
                        </div>
                        <%= tool %>
                      </td>
                    </tr>
                    <% end %>
                  </tbody>
                </table>
              </div>

              <div class="dropdownList" id="reaction_dropdown_list" style="display:none">
                <table>
                  <% { arrow: 'Arrow', plus: 'Plus', automap: 'Auto-Mapping', map: 'Mapping', unmap: 'Unmappping' }.each do |action, title| %>
                  <tr class="<%= action == 'automap' ? 'dropdownListItem serverRequired' : 'dropdownListItem' %>" id="reaction_<%= action %>" title="Reaction <%= title %> Tool">
                    <td>
                      <div id="reaction_<%= action %>_todo">
                        <%= sprite_tag '', class: 'dropdownIcon reaction_reaction-' + action.to_s + '-dropdown', alt: '' %>
                      </div>
                      Reaction
                      <%= title %>
                      Tool
                    </td>
                  </tr>
                  <% end %>
                </table>
              </div>

              <div class="dropdownList" id="rgroup_dropdown_list" style="display:none">
                <table>
                  <tr class="dropdownListItem" id="rgroup_label" title="R-Group Label Tool (Shift+R)">
                    <td>
                      <div id="rgroup_label_todo">
                        <%= sprite_tag '', class: 'dropdownIcon rgroup_rgroup-label-dropdown', alt: '' %>
                      </div>
                      R-Group Label Tool
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="rgroup_fragment" title="R-Group Fragment Tool (Shift+R)">
                    <td>
                      <div id="rgroup_fragment_todo">
                        <%= sprite_tag '', class: 'dropdownIcon rgroup_rgroup-fragment-dropdown', alt: '' %>
                      </div>
                      R-Group Fragment Tool
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="rgroup_attpoints" title="Attachment Point Tool (Shift+R)">
                    <td>
                      <div id="rgroup_attpoints_todo">
                        <%= sprite_tag '', class: 'dropdownIcon rgroup_rgroup-attpoints-dropdown', alt: '' %>
                      </div>
                      Attachment Point Tool
                    </td>
                  </tr>
                </table>
              </div>

              <div class="dropdownList" id="transform_dropdown_list" style="display:none">
                <table>
                  <tr class="dropdownListItem" id="transform_rotate" title="Rotate Tool">
                    <td>
                      <div id="transform_rotate_todo">
                        <%= sprite_tag '', class: 'dropdownIcon transform_transform-rotate-dropdown', alt: '' %>
                      </div>
                      Rotate Tool
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="transform_flip_h" title="Horizontal Flip">
                    <td>
                      <div id="transform_flip_h_todo">
                        <%= sprite_tag '', class: 'dropdownIcon transform_transform-flip-h-dropdown', alt: '' %>
                      </div>
                      Horizontal Flip
                    </td>
                  </tr>
                  <tr class="dropdownListItem" id="transform_flip_v" title="Vertical Flip">
                    <td>
                      <div id="transform_flip_v_todo">
                        <%= sprite_tag '', class: 'dropdownIcon transform_transform-flip-v-dropdown', alt: '' %>
                      </div>
                      Vertical Flip
                    </td>
                  </tr>
                </table>
              </div>

              <input id="input_label" type="text" maxlength="4" size="4" style="display:none;"/>

              <div id="window_cover" style="width:0;height:0;display:none">
                <div id="loading" style="display:none"></div>
              </div>

              <div class="dialogWindow fileDialog" id="open_file" style="display:none;">
                <div style="width:100%">
                  <div>
                    Open File
                  </div>
                  <div style="height:0.5em"></div>
                  <div class="serverRequired" style="font-size:small">
                    <input type="radio" id="radio_open_from_input" name="input_source" checked>Input</input>
                    <input type="radio" id="radio_open_from_file" name="input_source">File</input>
                  </div>
                  <div class="serverRequired" style="font-size:small" align="left">
                    <input type="checkbox" id="checkbox_open_copy" name="open_mode">Load as a fragment and copy to the Clipboard</input>
                  </div>
                  <div class="serverRequired" id="open_from_file">
                    <form id="upload_mol" style="margin-top:4px" action="open" enctype="multipart/form-data" target="buffer_frame" method="post">
                      <input type="file" name="filedata" id="molfile_path"/>
                      <div style="margin-top:0.5em;text-align:center">
                        <input id="upload_cancel" type="button" value="Cancel"/>
                        <input type="submit" value="OK"/>
                      </div>
                    </form>
                  </div>
                  <div style="margin:4px;" id="open_from_input">
                    <textarea class="chemicalText" id="input_mol" wrap="off"></textarea>
                    <div style="margin-top:0.5em;text-align:center">
                      <input id="read_cancel" type="button" value="Cancel"/>
                      <input id="read_ok" type="submit" value="OK"/>
                    </div>
                  </div>
                </div>
              </div>

              <div class="dialogWindow fileDialog" id="save_file" style="display:none;">
                <div style="width:100%">
                  <div>
                    Save File
                  </div>
                  <div style="height:0.5em"></div>
                  <div>
                    <label>Format:</label>
                    <select id="file_format">Format:
                      <option value="mol">MDL/Symyx Molfile</option>
                      <option value="smi">Daylight SMILES</option>
                      <option id="file_format_inchi" value="inchi">InChI String</option>
                      <!--option value="png">Portable Network Graphics PNG</option>
                            <option value="svg">Scalable Vector Graphics SVG</option-->
                    </select>
                  </div>
                  <div style="margin:4px;">
                    <textarea class="chemicalText" id="output_mol" wrap="off" readonly></textarea>
                    <form id="download_mol" style="margin-top:0.5em;text-align:center" action="save" enctype="multipart/form-data" target="_self" method="post">
                      <input type="hidden" id="mol_data" name="filedata"/>
                      <input id="save_ok" type="button" value="Close"/>
                    </form>
                  </div>
                </div>
              </div>

              <div class="dialogWindow propDialog" id="atom_properties" style="display:none;">
                <div style="width:100%">
                  <div>
                    Atom Properties
                  </div>
                  <div style="height:0.5em"></div>
                  <table style="text-align:left">
                    <tr>
                      <td>
                        <label>Label:</label>
                      </td>
                      <td>
                        <input id="atom_label" type="text" maxlength="20" size="20" list="atom_abbrevs"/>
                        <datalist id="atom_abbrevs">
                          <% @atom_abbreviation_list.each do |title| %>
                            <option value="<%= title %>"/>
                          <% end %>
                        </datalist>
                      </td>
                      <td rowspan="5" style="width:5px"></td>
                      <td>
                        <label>Number:</label>
                      </td>
                      <td>
                        <input id="atom_number" type="text" readonly="readonly" maxlength="3" size="3"/>
                      </td>
                      <td rowspan="5" style="width:10px"></td>
                      <td colspan="2" style="background-color: #D7D7D7">
                        Query specific
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>Charge:</label>
                      </td>
                      <td>
                        <input id="atom_charge" type="text" maxlength="3" size="3"/>
                      </td>
                      <td>
                        <label>Valency:</label>
                      </td>
                      <td>
                        <select id="atom_valence" style="width:100%">
                          <option value=""></option>
                          <option value="0">0</option>
                          <option value="1">I</option>
                          <option value="2">II</option>
                          <option value="3">III</option>
                          <option value="4">IV</option>
                          <option value="5">V</option>
                          <option value="6">VI</option>
                          <option value="7">VII</option>
                          <option value="8">VIII</option>
                        </select>
                      </td>
                      <td>
                        <label>Ring bond count:</label>
                      </td>
                      <td>
                        <select id="atom_ringcount" style="width:100%">
                          <option value="0"></option>
                          <option value="-2">As drawn</option>
                          <option value="-1">0</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                        </select>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>Isotope:</label>
                      </td>
                      <td>
                        <input id="atom_isotope" type="text" maxlength="3" size="3"/>
                      </td>
                      <td>
                        <label>Radical:</label>
                      </td>
                      <td>
                        <select id="atom_radical">
                          <option value="0"></option>
                          <option value="2">Monoradical</option>
                          <option value="1">Diradical (singlet)</option>
                          <option value="3">Diradical (triplet)</option>
                        </select>
                      </td>
                      <td>
                        <label>H count:</label>
                      </td>
                      <td>
                        <select id="atom_hcount" style="width:100%">
                          <option value="0"></option>
                          <option value="1">0</option>
                          <option value="2">1</option>
                          <option value="3">2</option>
                          <option value="4">3</option>
                          <option value="5">4</option>
                        </select>
                      </td>
                    </tr>
                    <% if @show_attachment_point %>
                      <tr>
                        <td>
                          <label>Is attachment point:</label>
                        </td>
                        <td>
                          <input type="checkbox" id="aid" value="aid">
                        </td>
                      </tr>
                    <% end %>
                    <% if @show_attachment_point2 %>
                      <tr>
                        <td>
                          <label>Is attachment point #2:</label>
                        </td>
                        <td>
                          <input type="checkbox" id="aid2" value="aid2">
                        </td>
                      </tr>
                    <% end %>
                    <tr>
                      <td colspan="5" style="background-color: #D7D7D7">
                        Reaction flags
                      </td>
                      <td>
                        <label>Substitution count:</label>
                      </td>
                      <td>
                        <select id="atom_substitution" style="width:100%">
                          <option value="0"></option>
                          <option value="-2">As drawn</option>
                          <option value="-1">0</option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                          <option value="6">6</option>
                        </select>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>Inversion:</label>
                      </td>
                      <td>
                        <select id="atom_inversion">
                          <option value="0"></option>
                          <option value="1">Inverts</option>
                          <option value="2">Retains</option>
                        </select>
                      </td>
                      <td>
                        <label>Exact:</label>
                      </td>
                      <td>
                        <select id="atom_exactchange" style="width:100%">
                          <option value="0"></option>
                          <option value="1">Exact change</option>
                        </select>
                      </td>
                      <td>
                        <label>Unsaturation:</label>
                      </td>
                      <td>
                        <select id="atom_unsaturation">
                          <option value="0"></option>
                          <option value="1">Unsaturated</option>
                        </select>
                      </td>
                    </tr>
                  </table>
                  <div style="margin-top:0.5em">
                    <input id="atom_prop_cancel" type="button" value="Cancel"/>
                    <input id="atom_prop_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="dialogWindow propDialog" id="atom_attpoints" style="display:none;">
                <div style="width:100%">
                  <div>
                    Attachment Points
                  </div>
                  <table style="text-align:left">
                    <tr>
                      <td>
                        <input type="checkbox" id="atom_ap1">
                      </td>
                      <td>
                        Primary attachment point
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input type="checkbox" id="atom_ap2">
                      </td>
                      <td>
                        Secondary attachment point
                      </td>
                    </tr>
                  </table>
                  <div style="height:0.5em"></div>
                  <div style="margin-top:0.5em">
                    <input id="atom_attpoints_cancel" type="button" value="Cancel"/>
                    <input id="atom_attpoints_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="dialogWindow propDialog" id="bond_properties" style="display:none;">
                <div style="width:100%">
                  <div>
                    Bond Properties
                  </div>
                  <div style="height:0.5em"></div>
                  <table style="text-align:left">
                    <tr>
                      <td>
                        <label>Type:</label>
                      </td>
                      <td>
                        <select id="bond_type" style="width:100%">
                          <option value="single">Single</option>
                          <option value="up">Single Up</option>
                          <option value="bold">Bold Up</option>
                          <option value="down">Single Down</option>
                          <option value="updown">Single Up/Down</option>
                          <option value="double">Double</option>
                          <option value="crossed">Double Cis/Trans</option>
                          <option value="triple">Triple</option>
                          <option value="aromatic">Aromatic</option>
                          <option value="coordination">Coordination</option>
                          <option value="coordinationarrow">Coordination (arrow)</option>
                          <option value="any">Any</option>
                          <option value="singledouble">Single/Double</option>
                          <option value="singlearomatic">Single/Aromatic</option>
                          <option value="doublearomatic">Double/Aromatic</option>
                        </select>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>Topology:</label>
                      </td>
                      <td>
                        <select id="bond_topology" style="width:100%">
                          <option value="0">Either</option>
                          <option value="1">Ring</option>
                          <option value="2">Chain</option>
                        </select>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>Reacting Center:</label>
                      </td>
                      <td>
                        <select id="bond_center">
                          <option value="0">Unmarked</option>
                          <option value="-1">Not center</option>
                          <option value="1">Center</option>
                          <option value="2">No change</option>
                          <option value="4">Made/broken</option>
                          <option value="8">Order changes</option>
                          <option value="12">Made/broken and changes</option>
                          <!--option value="5">Order changes</option>
                                    <option value="9">Order changes</option>
                                    <option value="13">Order changes</option-->
                        </select>
                      </td>
                    </tr>
                  </table>
                  <div style="margin-top:0.5em">
                    <input id="bond_prop_cancel" type="button" value="Cancel"/>
                    <input id="bond_prop_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="dialogWindow sgroupDialog" id="sgroup_properties" style="display:none;">
                <div style="width:100%">
                  <div>
                    S-Group Properties
                  </div>
                  <div style="height:0.5em"></div>
                  <table style="text-align:left">
                    <tr>
                      <td>
                        <label>Type:</label>
                      </td>
                      <td>
                        <select id="sgroup_type">
                          <option value="GEN">Generic</option>
                          <option value="MUL">Multiple group</option>
                          <option value="SRU">SRU polymer</option>
                          <option value="SUP">Superatom</option>
                          <option value="DAT">Data</option>
                        </select>
                      </td>
                    </tr>
                    <tr class="generalSGroup">
                      <td>
                        <label>Connection:</label>
                      </td>
                      <td>
                        <select id="sgroup_connection">
                          <option value="ht">Head-to-tail</option>
                          <option value="hh">Head-to-head</option>
                          <option value="eu">Either unknown</option>
                        </select>
                      </td>
                    </tr>
                    <tr class="generalSGroup">
                      <td>
                        <label>Label (subscript):</label>
                      </td>
                      <td>
                        <input id="sgroup_label" type="text" maxlength="15" size="15"/>
                      </td>
                    </tr>
                    <tr class="dataSGroup">
                      <td>
                        <label>Field name:</label>
                      </td>
                      <td>
                        <input id="sgroup_field_name" type="text" maxlength="30" size="30"/>
                      </td>
                    </tr>
                    <tr class="dataSGroup">
                      <td>
                        <label>Field value:</label>
                      </td>
                    </tr>
                    <tr class="dataSGroup">
                      <td colspan="2">
                        <textarea class="dataSGroupValue" id="sgroup_field_value"></textarea>
                      </td>
                    </tr>
                    <tr class="dataSGroup">
                      <td colspan="2">
                        <input type="radio" id="sgroup_pos_absolute" name="data_field_pos" checked>Absolute</input>
                        <input type="radio" id="sgroup_pos_relative" name="data_field_pos">Relative</input>
                        <input type="radio" id="sgroup_pos_attached" name="data_field_pos">Attached</input>
                      </td>
                    </tr>
                  </table>
                  <div style="margin-top:0.5em">
                    <input id="sgroup_prop_cancel" type="button" value="Cancel"/>
                    <input id="sgroup_prop_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="dialogWindow userTemplateDialog" id="usertemplate_properties" style="display:none;">
                <div style="width:100%">
                  <div>
                    Create a template
                  </div>
                  <div style="height:0.5em"></div>
                  <table style="text-align:left">
                    <tr class="dataUserTemplate">
                      <td>
                        <label>Name:</label>
                      </td>
                      <td>
                        <input id="usertemplate_name" type="string" maxlength="15" size="15"/>
                      </td>
                    </tr>
                  </table>
                  <div style="margin-top:0.5em">
                    <input id="usertemplate_prop_cancel" type="button" value="Cancel"/>
                    <input id="usertemplate_prop_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="dialogWindow aminoAcidsDialog" id="aminoacids_properties" style="display:none;">
                <div style="width:100%">
                  <div>
                    Create amino acids chain
                  </div>
                  <div style="height:0.5em"></div>
                  <table style="text-align:left">
                    <tr class="dataAminoAcuds">
                      <td>
                        <label>Sequence (e.g. A-A-G):</label>
                      </td>
                      <td>
                        <input id="sequence_name" type="string" maxlength="100" size="100"/>
                      </td>
                    </tr>
                    <tr class="dataAminoAcuds">
                      <td>
                        <label>Sequence type:</label>
                      </td>
                      <td>
                        <select id="sequence_type">
                          <option value="normal">Normal</option>
                          <option value="reversed">Reversed</option>
                        </select>
                      </td>
                    </tr>
                  </table>
                  <div style="margin-top:0.5em">
                    <input id="aminoacids_prop_cancel" type="button" value="Cancel"/>
                    <input id="aminoacids_prop_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="moleculePropertiesDialog" id="molecule_properties" style="display:none;">
                <div style="width:100%">
                  <strong>
                    Molecule properties
                  </strong>
                  <table style="text-align:left">
                    <tr>
                      <td>
                        <label>Molecular weight:</label>
                      </td>
                      <td id="mw_value">
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>Formula:</label>
                      </td>
                      <td id="formula_value">
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>Elemental Analysis:</label>
                      </td>
                      <td id="ela_value">
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>IUPAC name:</label>
                      </td>
                      <td id="iupac_name_value">
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>Other names:</label>
                      </td>
                      <td id="names_value">
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div style="height:0.5em"></div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <strong>Selected part:</strong>
                      </td>
                      <td id="ela_value">
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>Molecular weight:</label>
                      </td>
                      <td id="mw_selected_value">
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>Formula:</label>
                      </td>
                      <td id="formula_selected_value">
                      </td>
                    </tr>
                  </table>
                  <div style="margin-top:0.5em; text-align: center;">
                    <input id="molecule_properties_btn_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="dialogWindow confirmDialog" id="usertemplate_confirm_dialog" style="display:none;">
                <div style="width:100%">
                  <div>
                    Delete the template?
                  </div>
                  <div style="height:0.5em"></div>
                  <div style="margin-top:0.5em">
                    <input id="usertemplate_confirm_cancel" type="button" value="Cancel"/>
                    <input id="usertemplate_confirm_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="dialogWindow automapDialog" id="automap_properties" style="display:none;">
                <div style="width:100%">
                  <div>
                    Reaction Auto-Mapping Parameter
                  </div>
                  <div style="height:0.5em"></div>
                  <table style="text-align:left">
                    <tr>
                      <td>
                        <label>Mode:</label>
                      </td>
                      <td>
                        <select id="automap_mode">
                          <option value="discard">Discard</option>
                          <option value="keep">Keep</option>
                          <option value="alter">Alter</option>
                          <option value="clear">Clear</option>
                        </select>
                      </td>
                    </tr>
                  </table>
                  <div style="margin-top:0.5em">
                    <input id="automap_cancel" type="button" value="Cancel"/>
                    <input id="automap_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="dialogWindow elemTableDialog" id="elem_table" style="display:none;">
                <div>
                  <div>
                    Periodic table
                  </div>
                  <div style="height:0.5em"></div>
                  <div id="elem_table_area"></div>
                  <div align="left">
                    <input type="radio" id="elem_table_single" name="atom_list" onchange="if (!Prototype.Browser.IE) ui.elem_table_obj.setMode('single')" onclick="if (Prototype.Browser.IE) ui.elem_table_obj.setMode('single')">Single</input>
                    <br/>
                    <input type="radio" id="elem_table_list" name="atom_list" onchange="if (!Prototype.Browser.IE) ui.elem_table_obj.setMode('list')" onclick="if (Prototype.Browser.IE) ui.elem_table_obj.setMode('list')">List</input>
                    <br/>
                    <input type="radio" id="elem_table_notlist" name="atom_list" onchange="if (!Prototype.Browser.IE) ui.elem_table_obj.setMode('notlist')" onclick="if (Prototype.Browser.IE) ui.elem_table_obj.setMode('notlist')">Not List</input>
                  </div>
                  <div style="margin-top:0.5em">
                    <input id="elem_table_cancel" type="button" value="Cancel"/>
                    <input id="elem_table_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="dialogWindow rgroupTableDialog" id="rgroup_table" style="display:none;">
                <div>
                  <div>
                    R-Group
                  </div>
                  <div style="height:0.5em"></div>
                  <div id="rgroup_table_area"></div>
                  <div style="margin-top:0.5em">
                    <input id="rgroup_table_cancel" type="button" value="Cancel"/>
                    <input id="rgroup_table_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="dialogWindow rlogicTableDialog" id="rlogic_table" style="display:none;">
                <div style="width:100%">
                  <div>
                    R-Group Logic
                  </div>
                  <div style="height:0.5em"></div>
                  <table style="text-align:left">
                    <tr>
                      <td>
                        <label for="rlogic_occurrence">Occurrence:</label>
                        <input id="rlogic_occurrence" type="text" maxlength="50" size="10"/>
                      </td>
                      <td>
                        <label for="rlogic_resth">RestH:</label>
                        <select id="rlogic_resth">
                          <option value="0">Off</option>
                          <option value="1">On</option>
                        </select>
                      </td>
                      <td>
                        <label for="rlogic_if">Condition:</label>
                        <select id="rlogic_if">
                          <option value="0">Always</option>
                        </select>
                      </td>
                    </tr>
                  </table>
                  <div style="margin-top:0.5em">
                    <input id="rlogic_cancel" type="button" value="Cancel"/>
                    <input id="rlogic_ok" type="button" value="OK"/>
                  </div>
                </div>
              </div>

              <div class="dialogWindow reagenericsTableDialog" id="reagenerics_table" style="display:none;">
                <div>
                  <div>
                    Reaxys Generics
                  </div>
                  <div style="height:0.5em"></div>
                  <div id="reagenerics_table_area"></div>
                  <div style="margin-top:0.5em">
                    <input id="reagenerics_table_cancel" type="button" value="Cancel"/>
                    <input id="reagenerics_table_ok" type="button" value="OK" disabled/>
                  </div>
                </div>
              </div>

              <iframe name="buffer_frame" id="buffer_frame" src="about:blank" style="display:none"></iframe>
            </div>
          </body>
        </html>
<script>
  ui.commontemplate_cat_ids = [<%= @template_categories.pluck(:id).join(', ') %>];
  ui.atom_abbreviation_list = <%= raw @atom_abbreviation_list %>
</script>
<% end %>
